<script setup>
import IconBase from '../icon-base/index.vue'
import IconSimple from '../icon-simple/index.vue'
import { computed } from 'vue'
const props = defineProps({
  name: String,
  size: {
    type: Number,
    default: 84
  },
  url: String,
})

const emit = defineEmits(['click'])

const styles = computed(() => ({
  width: `${props.size * 2}rpx`,
  height: `${props.size * 2}rpx`,
  borderRadius: `${props.size}rpx`
}))
const shadowBoxStyles = computed(() => ({
  width: `${props.size * 2 * 0.79}rpx`,
  height: `${props.size * 2 * 0.79}rpx`,
  borderRadius: `${props.size * 2 * 0.59}rpx`,
  filter: `blur(${props.size * 2 * 0.14}rpx)`,
}))

</script>

<template>
  <view class="avatar-container" :style="styles" @click="($event) => emit('click', $event)">
    <view class="avatar-shadow" :style="shadowBoxStyles"></view>
    <icon-base v-if="!props.url && props.name !== 'logo'" class="icon" image-folder="avatar-images" v-bind="{...props, ...$attrs}" />
    <icon-simple v-else-if="!props.url && props.name === 'logo'" class="icon" name="logo" v-bind="{...props, ...$attrs}" />
    <image v-else-if="props.url" class="network-avatar" :style="styles" :src="props.url" />
  </view>
</template>

<style scoped lang="scss">
  .avatar-container {
    position: relative;
    .icon {
      display: block;
    }
    .avatar-shadow {
      position: absolute;
      z-index: 0;
      top: 32%;
      left: 50%;
      transform: translate3d(-50%, 0, 0);
      opacity: 0.2;
      background: #227CA7;
    }
  }
</style>
